<template>
  <div>
    <div class="echatWarp">
      <div class="echartsNav">
        <div class="navLeft"></div>
        <div class="navText">业务发展</div>
        <div class="nvaTabls">
          <span
            :class="spanActive == 1 ? 'spanActive' : ''"
            @click="clickActive(1)"
            >年</span
          >
          <span
            :class="spanActive == 2 ? 'spanActive' : ''"
            @click="clickActive(2)"
            >月</span
          >
          <span
            :class="spanActive == 3 ? 'spanActive' : ''"
            @click="clickActive(3)"
            >日</span
          >
          <span
            :class="spanActive == 4 ? 'spanActive' : ''"
            @click="clickActive(4)"
            >周</span
          >
          <span
            :class="spanActive == 5 ? 'spanright' : ''"
            @click="clickActive(5)"
            >日</span
          >
        </div>
      </div>
      <div id="echartsOne"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

import img from "../../../../assets/yuan2.png";
import imgs from "../../../../assets/yuan1.png";
export default {
  data() {
    return {
      max: 0,
      spanActive: 1,
    };
  },
    mounted() {
    this.$nextTick(() => {
      this.one();
    });
  },
  methods: {
    // 第一个
    one() {
      var chartDom = document.getElementById("echartsOne");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        // title: {
        //   text: "Dynamic Data",
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            // data: categories,
            // 设置x轴字体颜色和大小
            axisLabel: {
              textStyle: {
                color: "rgba(53, 133, 132, 1)",
                fontSize: "14",
              },
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },

            axisLine: {
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },

          {
            type: "category",
            boundaryGap: true,
            // 隐藏折现图的x轴
            show: false,
            // 设置x轴字体颜色和大小
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "14",
              },
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "单位: --",
            // 设置y轴顶部文字样式
            nameTextStyle: {
              color: "rgba(0, 255, 181, 1)",
              fontSize: "14",
            },
            max: 150,
            min: 0,
            boundaryGap: [0.2, 0.2],
            // 设置y轴字体颜色和大小
            axisLabel: {
              textStyle: {
                color: "rgba(53, 133, 132, 1)",
                fontSize: "14",
              },
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },
            axisLine: {
              //y轴坐标轴，false为隐藏，true为显示
              show: false,
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
            // y轴分割线的设置
            splitLine: {
              show: false,
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
          {
            type: "value",
            scale: true,
            name: "",
            // 设置y轴顶部文字样式
            nameTextStyle: {
              color: "rgba(53, 133, 132, 1)",
              fontSize: "14",
            },
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
            axisLabel: {
              show: false,
              interval: "auto",
              formatter: "{value} %", //纵坐标百分比
              textStyle: {
                color: "rgba(53, 133, 132, 1)",
                fontSize: "14",
              },
            },
            axisTick: {
              //x轴刻度线
              show: false,
            },
            axisLine: {
              //y轴坐标轴，false为隐藏，true为显示
              show: false,
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#1b3b30", //左边线的颜色
                // width: "2", //坐标线的宽度
              },
            },
          },
        ],
        // 改变图列的位置
        legend: [
          {
            itemWidth: 25,
            bottom: "0%",
            itemHeight: 14,
            textStyle: {
              fontSize: 12,
              fontFamily: "Microsoft YaHei",
              color: "#98B8B0",
            },
          },
        ],
        // 改变图表的位置
        grid: {
          left: "12%",
          right: "10%",
          bottom: "20%",
          top: "15%",
        },

        series: [
          {
            name: "实物资产",
            symbol: "image://" + imgs,
            type: "line",
            // smooth: true, //平滑曲线显示
            symbolSize: 20, //设定实心点的大小
            showAllSymbol: true, //显示所有图形。

            itemStyle: {
              normal: {
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 167, 83, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 167, 83, 0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                lineStyle: {
                  color: "rgba(255, 249, 10, 1)", //改变折线颜色
                  width: 2,
                  type: "dotted", //'dotted'虚线 'solid'实线
                },
              },
            },
            data: [
              ["12：30", 100],
              ["13：30", 120],
              ["14：30", 150],
              ["15：30", 100],
              ["16：30", 90],
            ],
          },
          // 柱状图
          {
            name: "增资扩股",
            type: "bar",
            barWidth: 20, //柱图宽度
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                borderColor: "rgba(0, 255, 181, 0.87)",
                borderWidth: 2,
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 181, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0, 255, 181, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(0, 255, 181, 0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [
              ["12：30", 100],
              ["13：30", 40],
              ["14：30", 120],
              ["15：30", 110],
              ["16：30", 10],
            ],
          },
          // 柱状图
          {
            name: "产股权",
            type: "bar",
            barCategoryGap: 50,
            //每一个的样式
            barWidth: 20, //柱图宽度
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
              color: "none",
              //边框色
              borderColor: "#fff",
              //border宽度
              borderWidth: 3,
              //border的边角弧度
              barBorderRadius: 15,
              normal: {
                barBorderRadius: [0, 0, 0, 0],
                borderColor: "rgba(0, 255, 251, 0.87)",
                borderWidth: 2,
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(0, 255, 251, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(0, 255, 251, 0.87)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(37, 203, 252, 0)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            data: [
              ["12：30", 20],
              ["13：30", 10],
              ["14：30", 50],
              ["15：30", 60],
              ["16：30", 5],
            ],
          },

          // 折线图
          {
            name: "招标采购",
            symbol: "image://" + img,
            type: "line",
            // smooth: true, //平滑曲线显示
            symbolSize: 20, //设定实心点的大小
            showAllSymbol: true, //显示所有图形。
            itemStyle: {
              normal: {
                // 拐点渐变色
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 167, 83, 1)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 167, 83, 0.1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                lineStyle: {
                  color: "rgba(255, 132, 0, 1)", //改变折线颜色
                  width: 1,
                },
              },
            },
            data: [
              ["12：30", 20],
              ["13：30", 40],
              ["14：30", 90],
              ["15：30", 50],
              ["16：30", 10],
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
        //点击年月日
    clickActive(val) {
      this.spanActive = val;
    },
  },
};
</script>

<style scoped>
.echatWarp {
  width: 500px;
  height: 280px;
  margin-bottom: 50px;
}
.echatWarp .echartsNav {
  display: flex;
  align-items: center;
}
.echatWarp .navText {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
  margin-left: 10px;
}
.echatWarp .nvaTabls {
  width: 299px;
  height: 26px;
  background: #002537;
  border: 1px solid #00fffb;
  border-radius: 12px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #00ffb5;
  display: flex;
  box-sizing: border-box;
  line-height: 26px;
  margin-left: 52px;
}
.echatWarp .nvaTabls span:hover {
  cursor: pointer;
}
.echatWarp .nvaTabls span {
  width: 62px;
  height: 24px;
  border-radius: 12px;
  display: block;
  text-align: center;
  box-sizing: border-box;
}
.echatWarp .nvaTabls .spanActive {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-left: -1px;
}
.echatWarp .nvaTabls .spanright {
  font-weight: bold;
  color: #222222;
  background: #00fffb;
  margin-right: -1px;
}
.navLeft {
  width: 23px;
  height: 26px;
  background: url("../../../../assets/leftDian.png") no-repeat center;
  background-size: 100% 100%;
}
#echartsOne {
  width: 100%;
  height: 100%;
}
#echartsTwo {
  width:100%;
  height: 100%;
}
#applications {
  width:100%;
  height: 100%;
}
#projectCategory {
  width:100%;
  height: 100%;
}
#applicationsDouble {
  width:100%;
  height: 100%;
}
</style>
